<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/5/6
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>创建游戏房间</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            $("[name='type']").click(function(){
                var val = $(this).val();
                if (val == 0) {
                    $("#pass_div").hide();
                } else {
                    $("#pass_div").show();
                }
            });
        });

        //创建房间
        function createRoom(){
            //获取参数
            var title = $("[name='title']").val();
            var type = $("[name='type']:checked").val();
            var password = $("[name='password']").val();
            var islook = $("[name='islook']:checked").val();

            //参数校验

            //ajax 请求后端创建房间对象
            $.ajax({
                type: "POST",
                url: "roomServlet?method=createRoom",
                data: {
                    title: title,
                    type: type,
                    password: password,
                    islook: islook
                },
                success: function(data){
                    //获取房间id
                    var rid = data.rid;
                    //打开一个新的页签
                    window.open("game.jsp?rid=" + rid + "&looks=0");
                },
                dataType: "json"
            });

        }
    </script>
</head>
<body>
    <h1>创建房间</h1>
    <div>
        标题：<input name="title"/>
    </div>
    <div>
        类型：<input name="type" type="radio" value="0" checked/>公开 <input name="type" type="radio" value="1"/>私密
    </div>
    <div id="pass_div" style="display: none;">
        密码：<input name="password" type="password"/>
    </div>
    <div>
        是否可观战：<input name="islook" type="radio" value="0" checked/>可观战 <input name="islook" type="radio" value="1"/>禁止观战
    </div>
    <button onclick="createRoom();">创建房间</button>
</body>
</html>
